﻿<style>
    #sin-chart-t,#sin-chart-p{
        width:100%;
    }
    /*.legend{
        position:absolute;
        top:0;
        left:0;
    }*/
</style>
<div id="content">
    <div smart-include="app/project/views/sub-header.tpl.html"></div>
    <div class="container_box" style="background-color: white">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#store" data-toggle="tab">仓库信息</a>
            </li>
            <li>
                <a href="#detail" data-toggle="tab">库存信息</a>
            </li>
            <li>
                <a href="#ios" data-toggle="tab">设备信息</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content row">
            <div class="tab-pane fade in active" id="store" style=" padding: 25px">
                <!-- 油罐信息 -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="well well-sm bg-color-teal txt-color-white pull-left" style="width:40%; padding:20px; background:#dda358!important; border-color:#dfcdcd!important">
                            <p>仓库编号</p>
                            <h2 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-tag"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.code}}
                            </h2>
                            <p>仓库名称</p>
                            <h2 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.name}} <span class="{{infor.status | status}}" style="font-size:12px;">生效</span>
                            </h2>
                            <!-- <p>仓库状态</p>
                            <h2 style="margin:10px 0;">{{infor.status}}</h2> -->
                            <p>仓库地区</p>
                            <h3 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-globe"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.country}}，{{infor.province}}，{{infor.city}},  
                                {{infor.address}}; 
                                邮编：{{infor.postcode}}
                            </h3>
                            <p>位置坐标</p>
                            <h3 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-map-marker"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.x_pos}},{{infor.y_pos}}
                            </h3>
                            <!-- <p>邮编</p>
                            <h2 style="margin:10px 0;">{{infor.postcode}}</h2> -->
                            <p>描述</p>
                            <h4 style="margin:10px 0;">
                                <span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;&nbsp;
                                {{infor.description}}
                            </h4>
                        </div>
                        <div class="well well-sm text-center pull-left" style="width:40%; padding:20px 0; border-left:0; height:361px;">
                            <h5>库存信息</h5>
                            <div class="list-group storeinfo">
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    货主名称：{{store.company_name}} 【{{store.company_id}}】
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    货品名称：{{store.item_name}} 【{{store.item_code}}】
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    库存数量：{{store.qty}} {{store.unit}}
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    液位计库存：{{store.y_qty}} m3
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    流量计库存：{{store.l_qty}} m3/s
                                </a>
                                <a href="" class="list-group-item"><span class="hovertab"></span>
                                    更新时间：{{store.downtime}}
                                </a>
                            </div>
                        </div>
                    </div>
        
                </div>
            </div>
            <div class="tab-pane fade" id="detail" style="padding:20px;">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover margin-bottom-0 sensor_table" id="device_table">
                        <thead>
                            <th>仓库代码</th>
                            <th>下发时间</th>
                            <th>货主名称</th>
                            <th>货主编号</th>
                            <th>货品名称</th>
                            <th>货品编号</th>
                            <th>库存数量</th>
                            <th>液位库存</th>
                            <th>流量库存</th>
                            <th>业务操作</th>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in storelists">
                                <td>{{item.code}}</td>
                                <td>{{item.downtime}}</td>
                                <td>{{item.company_name}}</td>
                                <td>{{item.company_id}}</td>
                                <td>{{item.item_name}}</td>
                                <td>{{item.item_code}}</td>
                                <td>{{item.qty}} {{item.unit}}</td>
                                <td>{{item.y_qty}} m3</td>
                                <td>{{item.l_qty}} m3/s</td>
                                <td>{{item.busicode}}</td>
                            </tr>
                        </tbody>
                    </table>
                    
                </div>
                <!-- <div class="dt-toolbar-footer">
                    <tm-pagination conf="paginationConf"></tm-pagination>
                </div> -->
            </div>
            <div class="tab-pane fade" id="ios" style=" padding: 25px">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover margin-bottom-0 sensor_table" id="device_table">
                        <thead>
                            <th class="text-align-center">序号</th>
                            <th class="text-align-center">设备名称</th>
                            <th class="text-align-center">设备编号</th>
                            <th class="text-align-center">设备类型</th>
                            <th class="text-align-center">客户名称</th>
                            <th class="text-align-center">地址</th>
                            <th class="text-align-center">地理位置</th>
                            <!-- <th>采集周期</th> -->
                            <th class="text-align-center">信号</th>
                            <th class="text-align-center">状态</th>
                            <!-- <th>创建人id</th>
                            <th>项目id</th> -->
                        </thead>
                        <tbody>
                            <tr ng-repeat="device in devices">
                                <td class="text-align-center">{{device.id}}</td>
                                <td class="text-align-center">{{device.devicename}}</td>
                                <td class="text-align-center">{{device.deviceid}}</td>
                                <td class="text-align-center">{{device.type == 1 ? '流量计' :(device.type == 2 ? '液位计' : (device.type == 3 ? '温度计' : '其他')) }}</td>
                                <td class="text-align-center">{{device.clientname}}</td>
                                <td class="text-align-center">{{device.zone}}</td>
                                <td class="text-align-center">{{device.pos}}</td>
                                <!-- <td>{{device.col_cycle}}</td> -->
                                <td class="text-align-center"><img ng-src="{{device.signal | signalfilter}}"></td>
                                <td class="text-align-center"><span class="{{device.status | status}}">{{device.status == 0 ? "报警" : "正常"}}</span></td>
                                <!-- <td>{{device.fid}}</td>
                                <td>{{device.pid}}</td> -->
                            </tr>
                        </tbody>
                    </table>
                    
                </div>
                <div class="dt-toolbar-footer">
                    <tm-pagination conf="paginationConf"></tm-pagination>
                </div>
            </div>
            
        </div>
        
    </div>
</div>

